<template>
  <div class="conversation-list">
    <div v-for="item in items" :key="item.id" class="list" @click="gotoMode(item.id)">
      <!-- <a href="#"> -->
      <div class="listItem">
        <span>{{ item.selectModel }}</span>
        <span>{{ item.updateAt }}</span>
      </div>
      <h2 class="listItem-title">
        {{ item.title }}
      </h2>
      <!-- </a> -->
    </div>
  </div>
</template>

<script lang="ts" setup>
import {defineProps} from "vue";
import type {ConversationProps} from "@/type";
import {useRouter} from "vue-router";

const router = useRouter();

const props = defineProps<{ items: ConversationProps[] }>();
const gotoMode = (id: number) => {
  router.push({path: `/conversation/${id}`, query: {name: 'viking'}, hash: '#foo'});
};
</script>

<style lang="scss" scoped>
.list {
  @apply border-gray-300 border-t cursor-pointer bg-white  p-2;
  &:hover {
    background-color: $primary;
    color: white;

    .listItem {
      @apply text-white;
      // 强制设置 listItem 的字体颜色为白色
    }

    .listItem-title {
      @apply text-white;
      // 强制设置 listItem-title 的字体颜色为白色
    }
  }

  .listItem {
    @apply flex justify-between items-center text-sm leading-5 ;
    color: $SH-COLOR;
  }

  .listItem-title {
    /**
   * truncate 文本溢出省略号
   */
    @apply font-[600] text-[14px] leading-6 truncate;
  }
}
</style>
